<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>你画我猜</title>
</head>
<style>
  #c1 {
    border: 1px solid #cccccc;
  }
</style>

<body>
  <button onclick="clearCan()" style="padding: 10px 20px;font-size: 20px;background-color: aquamarine;border-radius: 10px;box-shadow: -2px -2px #0000006b;">清空</button>
  <canvas id="c1" height="500" width="300"></canvas>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    function clearCan() {
      var oC = document.getElementById("c1");
      var oCG = oC.getContext('2d');
      oC.height = oC.height;
    }
    window.onload = function () {
      var oC = document.getElementById("c1");
      var oCG = oC.getContext('2d');

      oC.onmousedown = function (ev) {
        var ev = ev || window.event;
        //ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop鼠标在当前画布上X,Y坐标
        oCG.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
        document.onmousemove = function (ev) {
          var ev = ev || window.event;//获取event对象
          oCG.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
          var gradient = oCG.createLinearGradient(0, 0, 800, 0);
          gradient.addColorStop("0", "magenta");
          gradient.addColorStop("0.5", "blue");
          gradient.addColorStop("1.0", "red");

          oCG.strokeStyle = gradient;
          oCG.lineWidth = 5;
          oCG.stroke();
        };
        oC.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };

      oC.ontouchstart = function (ev) {
        ev.preventDefault();
        var ev = ev || window.event;
        //ev.clientX-oC.offsetLeft,ev.clientY-oC.offsetTop鼠标在当前画布上X,Y坐标
        oCG.moveTo(ev.touches[0].clientX - oC.offsetLeft, ev.touches[0].clientY - oC.offsetTop);
        document.ontouchmove = function (ev) {
          ev.preventDefault();
          var ev = ev || window.event;//获取event对象
          oCG.lineTo(ev.touches[0].clientX - oC.offsetLeft, ev.touches[0].clientY - oC.offsetTop);
          var gradient = oCG.createLinearGradient(0, 0, 800, 0);
          gradient.addColorStop("0", "magenta");
          gradient.addColorStop("0.5", "blue");
          gradient.addColorStop("1.0", "red");

          oCG.strokeStyle = gradient;
          oCG.lineWidth = 5;
          oCG.stroke();
        };
      };

      function reSize() {
        $(window).resize(resizeCanvas);
        function resizeCanvas() {
          $(oC).attr("width", $(window).get(0).innerWidth);
          $(oC).attr("height", $(window).get(0).innerHeight);
        };
      }
      reSize();
     
    };
  </script>
</body>

</html>